import React, { useState } from 'react';

/*
1 每一次修改状态值的时候，会拿最新要修改的值和之前的状态值做比较【基于Object.is做比较】
2 如果发现两次的值是一样的，则不会修改状态，也不会让视图更新【可以理解为：类似于PureComponent，在shouldComponentUpdate中做了浅比较和优化】
 */
export default function Testfive() {
  console.log('reander 渲染');
  const [x, setX] = useState(10);
  console.log('x', x);
  const handle = () => {
    for (let i = 0; i < 10; i++) {
      // setX(10);
      //函数式更新  更新一次，x 结果为20
      setX((prev) => {
        console.log(prev); //存储上一次的状态值
        return prev + 1; //返回的信息是我们要修改的状态值
      });
    }
  };
  //点击按钮之后更新1次,x变成11
  return (
    <>
      <span>x:{x}</span>
      <button onClick={handle}>新增</button>
    </>
  );
}
